<template>
	<view>
		<!-- pages/user_comment/user_comment.wxml -->
		<template v-if="broker_user_id == 0">
			<view v-if="house_info.default_broker" class="page-foot">
				<view class="footbox">
					<view class="df ac js foot1">
						<view class="df ac">
							<image :lazy-load="true" :src="house_info.default_broker.user.avatar" class="footavatar"
								mode="aspectFill"></image>
							<view>
								<view class="name">{{ house_info.default_broker.user.nickname }}</view>
								<view class="fs24 col89">
									服务
									<text class="colf8">{{ house_info.default_broker.profile.service_num }}</text>
									人
								</view>
							</view>
						</view>
						<view class="df ac">
							<button @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</button>
							<!-- <button @tap="jumpToChat" class="btn2">立即微聊</button> -->
							<button open-type="contact" class="btn2">立即微聊</button>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="page-foot">
				<view class="footbox">
					<view class="foot2 df ac js">
						<view class="df ac">
							<button @tap="bindPhoneCall"
								:data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel"
								class="tc conbtn1">
								<image src="/static/icon/icon_tel2.png" class="icon_tel2"></image>
								<view class="fs24">咨询热线</view>
							</button>
							<navigator url="/pages/home/help_you/help_you" class="tc conbtn2">
								<image src="/static/icon/icon_search-b.png" class="icon_search"></image>
								<view class="fs24">帮我找房</view>
							</navigator>
						</view>
						<view class="df ac">
							<button @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</button>
							<!-- <button @tap="jumpToChat" class="btn2">立即微聊</button> -->
							<button open-type="contact" class="btn2">立即微聊</button>
						</view>
					</view>
				</view>
			</view>
		</template>

		<view class="container">
			<template v-if="broker_user_id == 0">
				<view class="navbox df ac">
					<view :class="'navitem ' + (comment_type == 1 ? 'active' : '')" data-navindex="1" @tap="choosenav">
						用户点评({{ statisticsData.user_comment_all_count }}）</view>
					<view :class="'navitem ' + (comment_type == 2 ? 'active' : '')" data-navindex="2" @tap="choosenav">
						咨询师点评({{ statisticsData.broker_comment_all_count }})
					</view>
				</view>

				<view v-if="comment_type == 1" class="typelist">
					<view @tap="changeSearchType" data-type="1" :class="search_type == 1 ? 'active' : ''">
						全部({{ statisticsData.user_comment_all_count }})</view>
					<view @tap="changeSearchType" data-type="2" :class="search_type == 2 ? 'active' : ''">
						好评({{ statisticsData.user_comment_good_count }})</view>
					<view @tap="changeSearchType" data-type="3" :class="search_type == 3 ? 'active' : ''">
						中评({{ statisticsData.user_comment_medium_count }})</view>
					<view @tap="changeSearchType" data-type="4" :class="search_type == 4 ? 'active' : ''">
						有图({{ statisticsData.user_comment_image_count }})</view>
					<view @tap="changeSearchType" data-type="5" :class="search_type == 5 ? 'active' : ''">最新</view>
				</view>
				<view v-else class="typelist">
					<view @tap="changeSearchType" data-type="1" :class="search_type == 1 ? 'active' : ''">
						全部({{ statisticsData.broker_comment_all_count }})</view>
					<view @tap="changeSearchType" data-type="2" :class="search_type == 2 ? 'active' : ''">
						好评({{ statisticsData.broker_comment_good_count }})</view>
					<view @tap="changeSearchType" data-type="3" :class="search_type == 3 ? 'active' : ''">
						中评({{ statisticsData.broker_comment_medium_count }})</view>
					<view @tap="changeSearchType" data-type="4" :class="search_type == 4 ? 'active' : ''">
						有图({{ statisticsData.broker_comment_image_count }})</view>
					<view @tap="changeSearchType" data-type="5" :class="search_type == 5 ? 'active' : ''">最新</view>
				</view>
			</template>

			<view class="comment">
				<template v-if="loadingList.total > 0">
					<template v-for="(item, index) in loadingList.data">
						<view class="useritem df">
							<image :lazy-load="true" :src="item.user.avatar" class="icon_avatar"></image>
							<view class="flex-grow-1">
								<view class="fs30">{{ item.user.nickname }}</view>
								<navigator v-if="broker_user_id > 0 && item.house_id > 0"
									:url="'/pages/house/building_detail/building_detail?id=' + item.house_id"
									class="target">
									#{{ item.house.name }}#
								</navigator>
								<view class="col3 comdetail">{{ item.content }}</view>
								<view class="df ac flexwa compicbox">
									<image @tap="previewImg" :data-url="item" :lazy-load="true" :src="item" alt=""
										class="compic" mode="aspectFill" v-for="(item, index1) in item.images_arr">
									</image>
								</view>
								<view class="df ac js">
									<view class="fs24 col89">{{ item.createtime_text }}</view>
									<view @tap="likeComment" :data-index="index" class="df ac">
										<image :src="'/static/icon/icon_zan' + (item.is_like ? '-on' : '') + '.png'"
											mode="aspectFill" class="icon_zan"></image>
										<view :class="'fs24 ' + (item.is_like ? 'coloractive' : '')">
											赞({{ item.like_num }})</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-if="loadingList.current_page >= loadingList.last_page && loadingList.total > 5">
						<view class="fs30 col9 tc">数据加载完毕</view>
					</template>
				</template>
				<template v-else>
					<u-empty
					        mode="data"
							text="暂无数据"
							textSize="24"
					        icon="/static/images/none-data.png"
					>
					</u-empty>
				</template>
			</view>
		</view>

		<view v-if="broker_user_id == 0" @tap="jumpToComment" class="writecom df ac jc">
			<image src="/static/icon/icon_helpme.png" class="icon_helpme"></image>
			写评论
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
					<view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>楼盘总是悄无声息的开盘？</view>
						<view>一键订阅，让您抢占买房先机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
					<view class="fs40 black tc mb20">订阅价格变动通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
					<view class="fs40 black tc mb20">订阅实时动态通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">免费专车看房</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>公交太累，打车太贵，看房团还要等位</view>
						<view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">我要咨询</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>该项目有哪些优劣势？性价比如何？</view>
						<view>还有什么类似楼盘推荐……</view>
						<view>更多问题，咨询师帮你答疑解惑</view>
					</view>
				</template>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
						:value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码"
						placeholder-style="color:#ccc;" /></view>
				<view @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
	// pages/user_comment/user_comment.js
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				
				has_change:false,
				
				popupStatus: false,

				//订阅咨询预约弹窗
				reserveStatus: false,

				//预约成功弹窗
				// 预约订阅类型
				appoint_type: 1,

				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,

				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',

				appoint_mobile_text: '',
				broker_user_id: 0,

				house_info: {},

				//房源信息
				type: 1,

				//类型:1=楼盘评价,2=咨询师评价
				broker_user_id: 0,

				//关联咨询师
				comment_type: 1,

				//点评房源人类型:1=用户点评,2=咨询师点评
				search_type: 1,

				//搜索类型：1=全部，2=好评，3=中评，4=有图，5=最新
				house_id: 0,

				statisticsData: {
					user_comment_all_count: '',
					broker_comment_all_count: '',
					user_comment_good_count: '',
					user_comment_medium_count: '',
					user_comment_image_count: '',
					broker_comment_good_count: '',
					broker_comment_medium_count: '',
					broker_comment_image_count: ''
				},

				//统计数据
				// 评论列表
				loadingList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},

				all_img_arr: [],
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			this.house_info=app.globalData.pagesParamHouseInfo
			this.type=options.type || 1;
			this.comment_type=options.comment_type || 1;
			this.search_type=options.search_type || 1;
			this.broker_user_id=options.broker_user_id || 0;
			this.house_id=options.house_id || 0

			if (this.broker_user_id && this.type == 1) {
				uni.setNavigationBarTitle({
					title: '楼盘解读'
				});
			} else if (this.broker_user_id && this.type == 2) {
				uni.setNavigationBarTitle({
					title: '用户评价'
				});
			}

			this.initData();
		},
		onShow: function() {
			if(this.has_change){
				this.initData();
				this.has_change=false;
				let pages = getCurrentPages(); // 页面栈数组，第一个元素为首页，最后一个元素为当前页面。
				let prevPage = pages[pages.length - 2]; // 上一页
				prevPage.$vm.has_change=true;
			}
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.loadingList.current_page >= this.loadingList.last_page) {
				return false;
			} else {
				this.getloadingList();
			}
		},
		methods: {

			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},

			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},

			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid, that.house_info.id);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				
				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				} 
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= uid; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},

			appoint_mobileFun(e) {
				this.appoint_mobile = e.detail.value
			},

			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				functions.checkLogin(function(ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile = appoint_mobile;

						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log', {
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								house_id: that.house_info.id,
								prov: that.house_info.prov,
								city: that.house_info.city,
								region: that.house_info.region
							},
							function(res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
									appoint_mobile.substr(7);
								that.reserveStatus = true;
								that.popupStatus = false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			closePopupStatus() {
				this.popupStatus = false;
			},
			closeReserveStatus() {
				this.reserveStatus = false;
			},

			likeComment(e) {
				var index = e.currentTarget.dataset.index;
				var data = this.loadingList.data;
				var now_info = data[index];

				if (now_info.is_like) {
					return false;
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/like_comment', {
								id: now_info.id
							},
							function(res) {
								data[index].is_like = true;
								data[index].like_num = 1 + Number(now_info.like_num);
								that.loadingList.data = data
								let pages = getCurrentPages(); // 页面栈数组，第一个元素为首页，最后一个元素为当前页面。
								let prevPage = pages[pages.length - 2]; // 上一页
								prevPage.$vm.has_change=true;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			choosenav(e) {
				this.comment_type = e.currentTarget.dataset.navindex;
				this.loadingList.current_page = 0
				this.getloadingList();
			},

			changeSearchType(e) {
				this.search_type = e.currentTarget.dataset.type;
				this.loadingList.current_page = 0
				this.getloadingList();
			},

			jumpToComment: function() {
				app.globalData.pagesParamHouseInfo = this.house_info;
				var that = this;
				var eventChannel = this.getOpenerEventChannel();
				functions.checkLogin(function(ret) {
					if (ret) {
						uni.navigateTo({
							url: '/pages/house/comment/comment?house_id=' + that.house_id
						});
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 获取列表信息
			getloadingList: function() {
				var that = this;
				var json = {
					house_id: that.house_id,
					type: that.type,
					broker_user_id: that.broker_user_id,
					comment_type: that.comment_type,
					search_type: that.search_type
				};
				json.page = Number(that.loadingList.current_page) + 1;

				if (json.page > 1 && that.loadingList.current_page >= that.loadingList.last_page) {
					functions.toast('已加载到底部了');
					return false;
				}
				functions.getAjaxList(that, '/api/xiluhouse/House/comment_list', json, function(res) {
					var loadingList = res.data;

					if (json.page > 1) {
						var now_loadingList_data = that.loadingList.data || [];
						var now_loadingList_data = now_loadingList_data.concat(loadingList.data);
						loadingList.data = now_loadingList_data;
					}

					var all_img_arr = [];
					loadingList.data.forEach((element) => {
						var images_arr = element.images_arr;
						images_arr.forEach((element2) => {
							all_img_arr.push(element2);
						});
					});
					that.all_img_arr = all_img_arr
					that.loadingList = loadingList
				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this; // 获取---搜索数据

				functions.getAjaxData(
					'/api/xiluhouse/house/comment_info', {
						house_id: that.house_id,
						type: that.type,
						broker_user_id: that.broker_user_id,
						comment_type: that.comment_type
					},
					function(res) {
						that.statisticsData = res.data
					}
				);
				that.loadingList.current_page = 0
				that.getloadingList();
			}
		}
	};
</script>
<style>
	@import url('@/static/css/old_project.css');

	.navbox {
		height: 97rpx;
		border-bottom: 1px solid #f4f3f3;
		line-height: 97rpx;
		text-align: center;
	}

	.navbox .navitem {
		flex: 1;
		font-size: 30rpx;
		position: relative;
	}

	.navbox .navitem.active {
		color: #0091ff;
	}

	.navbox .navitem.active::after {
		display: block;
		content: '';
		width: 30rpx;
		height: 6rpx;
		border-radius: 50rpx;
		background-color: #0091ff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.typelist {
		width: 100%;
		padding: 30rpx 40rpx;
	}

	.typelist view {
		border-radius: 5px;
		background: #f6f7fa;
		color: #898989;
		display: inline-block;
		margin-right: 30rpx;
		width: 130rpx;
		height: 55rpx;
		text-align: center;
		line-height: 55rpx;
		margin-bottom: 20rpx;
	}

	.typelist view.active {
		background-color: #0091ff;
		color: #fff;
	}

	.typelist view:nth-of-type(4n) {
		margin-right: 0;
	}

	.comment {
		padding: 0 40rpx;
	}

	.comment .useritem {
		padding-bottom: 40rpx;
	}

	.comment .icon_avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.comment .comdetail {
		padding: 16rpx 0;
	}

	.comment .icon_zan {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.comment .getinfo2 {
		margin: 0;
	}

	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: 32rpx;
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}

	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
	}

	.writecom {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		right: 40rpx;
		bottom: 343rpx;
		font-size: 30rpx;
		color: #fff;
		flex-direction: column;
	}

	.icon_helpme {
		width: 30rpx;
		height: 30rpx;
		margin-bottom: 5rpx;
	}

	.coloractive {
		color: #0091ff;
	}

	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
		border-top: 1px solid #f6f7fa;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}

	.pop {
		width: 100%;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
	}

	.pop .pop-title1 {
		padding: 20rpx 0 0;
		text-align: center;
		font-size: 40rpx;
	}

	.pop .pop-title2 {
		padding: 23rpx 0 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
	}

	.pop .pop-input {
		height: 90rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: 30rpx;
	}

	.pop .pop-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop .pop-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop-title3 {
		padding: 20rpx 30rpx 0;
		color: #898989;
		font-size: 24rpx;
	}

	.custom-class {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.reserve {
		background-color: #fff;
		padding: 10rpx 40rpx 30rpx;
		text-align: center;
	}

	.reserve .icon_reserve {
		width: 120rpx;
		height: 120rpx;
		margin: 0 0 40rpx;
	}

	.reserve .title1 {
		font-size: 40rpx;
		padding-bottom: 23rpx;
	}

	.reserve .title2 {
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
		padding: 0 20rpx 20rpx;
	}

	.reserve .reserve-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.reserve .reserve-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 30rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.compicbox .compic {
		width: calc((100% - 30rpx) / 3);
		height: 200rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.compicbox .compic:nth-of-type(3n) {
		margin-right: 0;
	}

	.useritem .target {
		padding-top: 30rpx;
		color: #0091ff;
	}
</style>
